<button class="btn btn-info" onclick="addExtendItem();" type="button">增加一条</button>
<div id="{$field}Tpl">
    {volist name="value" id="vo"}
    <div class="row">
        <div class="col-sm-6">
            <div class="input-group">
                <span class="input-group-addon">属性名</span>
                <input type="text" class="form-control" name="{$field}[key][]" value="{$vo.key}" placeholder="请输入属性名">
            </div>
        </div>
        <div class="col-sm-6">
            <div class="input-group">
                <span class="input-group-addon">属性值</span>
                <input type="text" class="form-control" name="{$field}[value][]" value="{$vo.value}" placeholder="请输入属性值">
                <span class="input-group-addon" onclick="delExtendItem(this)">-</span>
            </div>
        </div>
    </div>
{/volist}
</div>
<script>
    //增加扩展项
    function addExtendItem() {
        var html = '<div class="row">' +
            '<div class="col-sm-6">'+
            '<div class="input-group">'+
            '<span class="input-group-addon">属性名</span>'+
            '<input type="text" class="form-control" name="{$field}[key][]" placeholder="请输入属性名">'+
            '</div>'+
            '</div>'+
            '<div class="col-sm-6">'+
            '<div class="input-group">'+
            '<span class="input-group-addon">属性值</span>'+
            '<input type="text" class="form-control" name="{$field}[value][]" placeholder="请输入属性值">'+
            '<span class="input-group-addon" onclick="delExtendItem(this)">-</span>'+
            '</div>'+
            '</div>';
            '</div>';
        $('#{$field}Tpl').append(html);
    }
    function delExtendItem(obj) {
        $(obj).closest('.row').remove();
    }
</script>
